<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>9.游戏实验室：创建一个故事#2</title>
    <link rel="stylesheet" type="text/css" href="../../res/index.css" />
    <script type="text/javascript" src="../../js/blockly_compressed.js"></script>
    <script type="text/javascript" src="../../js/javascript_compressed.js"></script>
    <script type="text/javascript" src="../js9/action_d2.js"></script>
    <script type="text/javascript" src="../js9/action_s.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.1/TweenMax.min.js"></script>
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .btn-circle {
            width: 36px;
            height: 36px;
            text-align: center;
            padding: 6px 0;
            font-size: 16px;
            line-height: 1.428571429;
            border-radius: 18px;
            border: rgb(200,200,200) 2px solid;
        }
        .btn-circle.btn-lg {
            width: 50px;
            height: 50px;
            padding: 10px 16px;
            font-size: 18px;
            line-height: 1.33;
            border-radius: 25px;
        }
        .btn-circle.btn-xs {
            width: 6px;
            height: 6px;
            padding: 6px 6px;
            font-size: 5px;
            line-height: 1.33;
            border-radius: 35px;
        }
        .counter-text{
            text-anchor: end;
            font-size: 16px;
            font-family: Verdana, Geneva, sans-serif;
            font-weight: bold;
            fill: white;
            stroke: black;
            stroke-width: 1;
            cursor: default;
        }
    </style>

</head>
<body>
        <div class = "top">
            <ul>
                <li><a href="../../course1.html">课程分类</a></li>
                <li><a href="">项目</a></li>
                <li><a href="">关于</a></li>
                <div id="header-mid" class="col-lg-4" style="margin:5px;position: fixed;left: 25%;">
                    <div style="margin-top: 8px;display:inline;">
                        <div class="col-lg-4"  style="padding: 8px 0px; text-align: center;display:inline;width: 30%;">
                            <a style="color: #ffffff; font-size: 16px" href="../../course1.html">课程9：游戏实验室：创建一个故事</a>
                        </div>
                        <div class="col-lg-8" style="display: flex; flex-direction: row; background-color: rgb(244, 244, 244); border-radius: 5px; height: 40px; align-items: center; border:#b4b4b4 1px solid; width: 62%;">
                            <abbr title="1" style="border-bottom: transparent">
                                <button type="button" onclick="location.href='../course1-9.html'" class="btn btn-default btn-circle btn-xs" style="display: block; margin-left: 2px; margin-right: 2px"></button>
                            </abbr>
                            <button type="button" onclick="location.reload()" class="btn btn-default btn-circle" style="display: block; margin-left: 1px; margin-right: 2px">
                                2
                            </button>
                            <abbr title="3" style="border-bottom: transparent">
                                <button type="button" onclick="location.href='course1-9-3.html'"  class="btn btn-default btn-circle btn-xs" style="display: block; margin-left: 2px; margin-right: 2px"></button>
                            </abbr>
                           
                           
                        </div>
                    </div>
                </div>
                
</head>


        </ul>
    </div>
    <div data-radium="true"
        style="padding-left: 60px; padding-right: 10px; float: left; width: 100%; box-sizing: border-box; background-color: rgb(221, 221, 221); border-top-right-radius: 5px; border-top-left-radius: 5px;">
        <div data-radium="true"
            style="width: 100%; position: relative; float: left; height: 88px; margin-right: -300px; padding-right: 300px; overflow-y: scroll;">
            <div class="csf-top-instructions" data-radium="true" style="padding: 5px 0px;">
                <div data-radium="true" style="position: relative;">
                    <div data-radium="true"
                        style="background-color: white; border-radius: 10px; margin: 5px 0px; padding: 5px 76px 5px 10px; position: relative; border-style: dashed; border-width: 1px; border-color: white;">
                        <div style="overflow: hidden;">
                            <div class="instructions-markdown" data-radium="true"
                                style="margin-bottom: 0px; padding-top: 0px; margin-top: 0px;">
                                <div style="float:left"><img src="../res9/cat.png"
                                        style="width: 50px; height:50px"></div>
                                <div style=" float:left; margin-left:5px">
                                    <p id="hint">你能让我说:"我喜欢吃鱼"吗？</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="visualization" style="position:absolute;top: 140px;left: 0px; height: 480px;width: 1080px">
        <div id="gamePanel" style="position: absolute;margin-left:25px;margin-top:20px;width: 400px;height: 480px">
            <?xml version="1.0" encoding="UTF-8" standalone="no"?>
            <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
            <svg id="svgMaze" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                preserveAspectRatio="xMidYMid meet" viewBox="0 0 400 400" width="400" height="400">
                <defs>
                    <path d="M6 6L406 6L406 406L6 406L6 6Z" id="jtfEtTiHo"></path>
                    <clipPath id="clipbtCSVmwba">
                        <use xlink:href="#jtfEtTiHo" opacity="1"></use>
                    </clipPath>
                    <path d="M150 150L250 150L250 250L150 250L150 150Z" id="a137rZ8eQW"></path>
                    <clipPath id="clipaEuAWlze5">
                        <use xlink:href="#a137rZ8eQW" opacity="1"></use>
                    </clipPath>
                </defs>
                <g>
                    <g>
                        <g>
                            <g clip-path="url(#clipbtCSVmwba)" opacity="1">
                                <image
                                    xlink:href=""
                                    x="0" y="0" width="388" height="388"
                                    transform="matrix(1.0309278350515463 0 0 1.0309278350515463 5.999999999999943 5.999999999999993)">
                                </image>
                            </g>
                        </g>
                        <g>
                            <g clip-path="url(#clipaEuAWlze5)" opacity="1">
                                <image
                                    xlink:href="../res9/cat.png"
                                    x="0" y="0" width="177" height="177"
                                    transform="matrix(0.5649717514124295 0 0 0.5649717514124295 150.00000000000003 149.99529914529924)">
                                </image>
                            </g>
                        </g>
                    </g>
                </g>
            </svg>
            <button id="runButton" onclick="runButtonClick()"
                style="background-color:cyan;font-size: 20px;display: inline;">运行</button>
        </div>

        <div id="blocklyDiv" style="height: 480px;width: 600px;margin-left: 450px;"></div>
    </div>
    <xml xmlns="http://www.w3.org/1999/xhtml" id="toolbox" style="display: none;">
        <block type="speak"></block>
    </xml>

    <xml xmlns="http://www.w3.org/1999/xhtml" id="workspaceBlocks" style="display:none">
        <block type="start" id="1" x="38" y="20">

        </block>
    </xml>
   <script src="../js9/workspace.js"></script>
    <script src="../js9/course1-9-2/game2.js"></script>
</body>

</html>